<template>
  <a-modal
    title="操作"
    style="top: 20px;"
    :width="800"
    v-model="visible"
    :maskClosable="false"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit">
    <a-form :form="form">
      <a-form-item style="display:none"><a-input v-decorator="['id']" /></a-form-item>

      <a-form-item :wrapperCol="{ xs: { span: 24 }, sm: { span: 16, offset: 3 } }">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :headers="httpHeader"
          :show-upload-list="false"
          :action="action"
          :before-upload="beforeUpload"
          @change="handleChange"
        >
          <img v-if="form.getFieldValue('fileName')" :src="imageUrl + form.getFieldValue('fileName')" alt="avatar" style="width: 500px;height: 125px;" />
          <div v-else>
            <a-icon :type="loading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-input style="display:none" placeholder="文件" v-decorator="['fileName',{rules: [{ required: true, message: '请上传图片文件' }]}]" />
      </a-form-item>
      <a-form-item style="display:none" :labelCol="labelCol" :wrapperCol="wrapperCol" label="链接地址"><a-input placeholder="链接地址" v-decorator="['href']" /></a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="显示顺序">
        <a-input-number placeholder="显示顺序" min="0" v-decorator="['seq', { initialValue: 1 }]"></a-input-number>
      </a-form-item>
      <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否显示">
        <a-switch v-decorator="['open', { valuePropName: 'checked' }]">
          <a-icon slot="checkedChildren" type="check" />
          <a-icon slot="unCheckedChildren" type="close" />
        </a-switch>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import { saveSysAppBanner } from '@/api/appBanner'
import pick from 'lodash.pick'
export default {
  name: 'AppBannerModal',
  props: {},
  components: {},
  data () {
    return {
      loading: false,
      imageUrl: process.env.VUE_APP_API_BASE_URL + '/dfs/img?fileName=',
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      httpHeader: {
        token: Vue.ls.get(ACCESS_TOKEN)
      },
      action: process.env.VUE_APP_API_BASE_URL + '/dfs/upload'
    }
  },
  beforeCreate () {},
  created () {},
  methods: {
    handleChange (info) {
      console.log('文件状态改变', info.file.status)
      if (info.file.status === 'uploading') {
        this.$nextTick(() => {
          this.form.setFieldsValue({ fileName: '' })
        })
        this.loading = true
      } else if (info.file.status === 'done') {
        var res = info.file.response
        this.loading = false
        if (res.code === 0) {
          this.$nextTick(() => {
            this.form.setFieldsValue({ fileName: res.fileName })
          })
        }
      }
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('只能上传图片文件!')
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片文件不应该大于2MB!')
      }
      return isJpgOrPng && isLt2M
    },
    add () {
      this.form.resetFields()
      this.edit({ id: 0 })
    },
    edit (record) {
      console.log(record)
      this.mdl = Object.assign(record)
      this.visible = true
      this.$nextTick(() => {
        this.form.setFieldsValue(pick(this.mdl, 'id', 'href', 'fileName', 'seq', 'open'))
      })
    },
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.confirmLoading = true
          saveSysAppBanner(values)
            .then(res => {
              if (res.code === 0) {
                this.$message.success('保存成功')
                this.$emit('ok')
                this.visible = false
              } else {
                this.$message.error(res.msg)
              }
            })
            .catch(() => {
              this.$message.error('系统错误，请稍后再试')
            })
            .finally(() => {
              this.confirmLoading = false
            })
        }
      })
    }
  },
  watch: {
    /*
      'selectedRows': function (selectedRows) {
        this.needTotalList = this.needTotalList.map(item => {
          return {
            ...item,
            total: selectedRows.reduce( (sum, val) => {
              return sum + val[item.dataIndex]
            }, 0)
          }
        })
      }
      */
  }
}
</script>
<style>
.avatar-uploader > .ant-upload {
  width: 500px;
  height: 125px;
}

.ant-upload-select-picture-card i {
  font-size: 32px;
  color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
  margin-top: 8px;
  color: #666;
}
</style>
